<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'name',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺图片" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`picUrl`) < 1"
                              accept=".png,.jpg"
									@uploadSuccess="formuploadSuccess($event, `picUrl`)" v-decorator="[
                    `picUrl`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺类型" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['type', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="0">线上店铺</a-select-option>
									<a-select-option :value="1">线下宠物店</a-select-option>
									<a-select-option :value="2">线下宠物医院</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店主名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
								  'userName',

								]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'userMobile',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺地址" :label-col="labelCol" :wrapper-col="wrapperCol">
								<div style="display:flex">

									<a-cascader :field-names="{ label: 'name', value: 'id', children: 'children' }"
										:options="addres_list" placeholder="请选择" @change="change_address" v-decorator="[
                    'addressCodes',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true ,type:'array'}]
                    }
                  ]" />
								</div>
							</a-form-item>
						</a-col>
					</a-row>
          <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="经纬度" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入正确数据以英文逗号分隔" v-decorator="[
                    'lng',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
                <div>经纬度数据请点击链接获取坐标数据：<a href='https://lbs.qq.com/getPoint/?from_wecom=1' target='_blank'>坐标拾取</a></div>
							</a-form-item>
						</a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="所属商户" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select v-decorator="[
                    'merchantId',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true,type:'number' }]
                    }
                  ]">

                  <a-select-option :value='item.id' v-for='(item,index) in business_list'
                                   :key='index'>{{ item.companyName }}
                  </a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="24">
							<a-form-item class="mb-15" label="详情地址" :label-col="{ span: 4 }"
								:wrapper-col="{ span: 20 }">
								<a-input placeholder="请输入" v-decorator="[
                    'addressDetail',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>


					</a-row>


					<!-- <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺销量" :label-col="labelCol" :wrapper-col="wrapperCol">
								0单
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺收入流" :label-col="labelCol" :wrapper-col="wrapperCol">
								0元
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="账户余额" :label-col="labelCol" :wrapper-col="wrapperCol">
								0元
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺评分" :label-col="labelCol" :wrapper-col="wrapperCol">
								0分
							</a-form-item>
						</a-col>
					</a-row> -->
					<a-row :gutter="[24, 0]">
						<a-col :span="24">
							<a-form-item class="mb-15" label="店铺描述" :label-col="{ span: 4 }"
								:wrapper-col="{ span: 20 }">
								<a-textarea placeholder="请输入" v-decorator="[
                    'description',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import {
		getArea,
		upStore,
		getBusiness,
		createStore,
    getStoreList
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				addres_list: [],
				business_list: [],
         store_list: []
			}
		},

 async created() {
    // this.token = storage.get(ACCESS_TOKEN)
    this.get_store()
  },
		methods: {
  get_store() {
      getStoreList({
        pageNo: 1,
        pageSize: 100
        // type: 0,
        // status: 1,
        // name: ''
      }).then(res => {
        this.store_list = res.list
      })
    },
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					[type]: [data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
							// addressCodes:values.join(',')
						}
            let lists=data.lng.split(',')
            data.lat=lists[0]
            data.lng=lists[1]
						data.addressCodes=data.addressCodes.join(',');

						console.log('data', data)
						// let tmp = '';
						// data.addressCodes.map(item => {
						// 	if (tmp == '') {
						// 		tmp = item
						// 	} else {
						// 		tmp += ',' + item
						// 	}
						// })
						// data.addressCodes = tmp;
						data.picUrl = data.picUrl[0]
						// return
						// const fun = info && info.id ? deductionDetail : deductionDetail
						if(this.titles=='新增'){
              data.approveStatus=1
							createStore(data).then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
						}
						else{
							upStore(data)
								.then(() => {
									this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
									this.$emit('upload')
									this.cancel()
								})
								.finally(() => {
									this.loading = false
								})
						}

					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			async open(data) {
				this.addres_list = await this.get_address()
				this.get_business()
				this.info = data
				console.log(data, '111111')
				if (data.id) {
					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true

				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {
					let addressCodes = data.addressCodes == null ? [] : data.addressCodes.split(',');
					addressCodes.map((item, index) => {
						addressCodes[index] = addressCodes[index] * 1
					})
					this.form.setFieldsValue({
						isEnabled: true,
						...data,
						picUrl: [data.picUrl],
						addressCodes: addressCodes,
            lng:data.lat?(data.lat?.toString()+','+data.lng?.toString()):'',
					})
					console.log(this.form.getFieldValue('addressCodes'))
				})

			},
			get_address(id) {
				return new Promise(resolve => {
					getArea().then(res => {
						console.log(res)
						resolve(res)
					})
				})
			},
			change_address(e) {
				console.log(e)
				this.form.setFieldsValue({
					addressCodes: e
				})
			},
			get_business() {
				getBusiness({
					pageNo: 1,
					pageSize: 100,
					approveStatus: 1
				}).then(res => {
					this.business_list = res.list;
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>